<template>
  <div class='common-container'>
    <div class="header">
      <div class="header_left">
        <!-- <div class="org_name">{{ orgName }}</div>
        <div class="total"><i class="iconfont yonghu"></i>{{ total }}</div> -->

        <el-select size="small" v-model="searchSel" slot="prepend" placeholder="请选择" class="el_Select">
          <el-option label="用户名" value="1"></el-option>
          <el-option label="手机号" value="2"></el-option>
        </el-select>
        <el-input :placeholder="searchSel == 1 ? '请输入完整的用户名' : '请输入完整的手机号'" v-model="searchVal"
          style="width: 220px;margin-right: 15px;" size="small" maxlength="20" clearable @clear="searchClick"
          class="el_input">
          <el-button slot="append" :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'" @click="searchClick">
          </el-button>
        </el-input>

      </div>
      <div class="header_right" style="display: flex;align-items: center;">

        <el-button class="el_button" size="small" icon="el-icon-plus" style="margin-left: 15px" @click="addClick"
          v-if="role == 1 || user.roleName == 'TENANT_ADMIN'">
          关联成员
        </el-button>
        <el-button class="el_button" size="small" icon="el-icon-right" style="margin-left: 15px" @click="exit"
          v-if="role != 1 && user.roleName == 'ORG_ADMIN'">
          退出机构
        </el-button>
      </div>
    </div>
    <div class="content">
      <el-table :data="dataList" height="calc(100% - 65px)" class="table" :header-cell-style="headerStyle">
        <el-table-column align="center" label="序号" type="index" width="50" height="30"></el-table-column>
        <el-table-column align="center" prop="username" label="用户名"  show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" prop="mobile" label="手机号"  show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" prop="role" label="岗位" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.role == 1">管理员</span>
            <span v-if="scope.row.role == 2">消防安全专员</span>
            <span v-if="scope.row.role == 3">消防安全负责人</span>
            <span v-if="scope.row.role == 4">消防监管人</span>
            <span v-if="scope.row.role == 5">专职消防安全管理人 </span>
            <span v-if="scope.row.role == 6">楼(建筑)长</span>
            <span v-if="scope.row.role == 7">维保人员</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="设置岗位" placement="bottom"
              v-if="(role == 1 && user.userId != scope.row.userId) || (user.roleName == 'TENANT_ADMIN' && scope.row.role != 1)">
              <i @click="edit(scope.row)" class="iconfont guanliyuan tableBtnIcon"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="移除" placement="bottom"
              v-if="(role == 1 && user.userId != scope.row.userId) || (user.roleName == 'TENANT_ADMIN' && scope.row.role != 1)">
              <i @click="delClick(scope.row.id)" class="iconfont anquantuichu tableBtnIcon"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page.sync="page" :limit.sync="limit" :total="total" @pagination="getDataList" class="pagination">
      </pagination>
    </div>

    <member-add ref="refMemberAdd" :orgId="orgId"></member-add>
    <editturnOver ref="refeditturnOver" :editInfo="editInfo" :orgId="orgId"></editturnOver>

  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  reqOrgUserList,
  reqOrgUserDel,
  reqTurnOver,
  reqOrgExit,
} from "@api/api.js";
import editturnOver from "../components/editturnOver.vue";
import MemberAdd from "../components/MemberAdd.vue";
import Pagination from "@components/Pagination.vue";
import tableStyleMixin from "@mixin/table-style";

export default {
  name: "org-list",
  props: ['orgId', 'role'],
  components: {
    Pagination,
    editturnOver,
    MemberAdd
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      searchVal: "",
      searchSel: "1", //用户名/手机号
      dataList: [],
      page: 1,
      limit: 10,
      total: 0,
      loadingSearch: false,
      isZoom: false,
      orgName: "",
      parkUserInfo: {}, //分配园区管理员信息
      flag: false,
      editInfo: {},
    }
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {},
  methods: {
    async getDataList() {
      if(this.orgId==""){
         // 没有此单位时
        this.dataList = [];
        this.total = 0;
        return;
      } 
      let { searchSel, username, mobile, searchVal } = this;
      if (searchSel == 1) {
        username = searchVal;
        mobile = "";
      } else {
        mobile = searchVal;
        username = "";
      }
      const res = await reqOrgUserList(this.page, this.limit, {
        orgId: this.orgId,
        username,
        mobile,
        userId: this.user.userId,
        roleName: this.user.roleName,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataList = res.data.rows;
      this.total = res.data.total;
    },
    getInitDataList() {
      this.page = 1;
      this.limit = 10;
      this.getDataList();
    },
    // 查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.getDataList();
      this.loadingSearch = false;
    },
    // 设置单位管理员
    edit(row) {
      this.editInfo = JSON.parse(JSON.stringify(row))
      this.$refs.refeditturnOver.dialogVisible = true;
    },
    delClick(id) {
      this.$confirm("此操作将移除该成员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await reqOrgUserDel({ idList: [id] });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("移除成功");
          this.getInitDataList();
        })
        .catch(() => { });
    },
    // 点击关联成员
    addClick() {
      this.$refs.refMemberAdd.dialogVisible = true;
    },
    editState() {
      this.$emit('editState')
    },
    // 删除单位
    exit(data) {
      this.$confirm("此操作将退出该机构 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await reqOrgExit({
            orgId: this.orgId,
            userId: this.user.userId,
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("退出机构成功!");
          this.$emit('getUnit')
        })
        .catch(() => { });
    },
  },
  created() {

  },
  mounted() {

  }
}
</script>

<style lang='less' scoped>
@import url("~@views/orgManage/orgList.less");
@import url("~@views/style/tablePage.less");

// 查询条件切换
::v-deep .el-select .el-input {
  width: 100px;
}

// 搜索框
::v-deep .el_input .el-input__inner {
  border-left: none !important;
  border-radius: 0px !important;
}

::v-deep .el_Select .el-input__inner {
  border-radius: 0px !important;
}
</style>